<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <btns></btns>
        <contents></contents>

        <!-- 用户输出评论 -->
        <!-- <textarea name="" id="" cols="30" rows="10" v-model="ipt" @keyup='handlerClick'></textarea>
        <button @click="handlerClick">发布评论</button> -->
        <!-- 渲染用户的评论 -->
        <!-- <div v-for="item in list">
            {{item.naem}}
            {{item.time}}
            {{item.contents}}
            {{item.count}}
            <button @click="zan(item)">点赞</button>
            <button @click="top(item)">置顶</button>
            <button @click="del(item)">删除</button>
        </div> -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        let bus = new Vue()

        let btns = {
            template: `
                        <div>
                            <textarea name="" id="" cols="30" rows="10" v-model="ipt" @keyup.13='handlerClick'></textarea><button @click="handlerClick">发布评论</button>
                        </div>
                     `,
            data() {
                return {
                    ipt: ""
                }

            },
            methods: {
                handlerClick() {
                    bus.$emit("msg", this.ipt)
                    this.ipt = ""
                },
            }

        }
        let contents = {
            //l/props用来声明变量<contents :ids="index"></contents>在传递数据的时ll props中设置的名称，一定要和等号左边的名称相同
            //已经变成了当前组件的一个可以使用的变量
            template: `
                        <div>
                            <div v-for="item in list">
                            {{item.name}}
                            {{item.time}}
                            {{item.contents}}
                            {{item.count}}
                   <button @click="zan(item)">点赞</button>
                    <button @click="top(item)">置顶</button>
                    <button @click="del(item)">删除</button>
                        </div>
                        </div>
                     `,
            data() {
                return {
                    // currentIndex:0,
                    list: [{
                            id: 1,
                            name: 'alex',
                            contents: "今晚吃大排档",
                            time: "2021-10-11",
                            count: 0
                        },
                        {
                            id: 2,
                            name: 'alex',
                            contents: "今晚吃海鲜",
                            time: "2021-10-11",
                            count: 0
                        }
                    ]
                }
            },

            created() {
                //   声明周期函数，自动执行的函数
                //调用组件的时候，生命周期函数会自动执行
                //created其中的一个函数
                // console.log(123);
                bus.$on('msg', (ipt) => {
                    this.list.push({
                        id: this.list.length,
                        name: 'xxx',
                        contents: ipt,
                        time: "xxxx-xx-xx",
                        count: 0,
                    })
                    console.log(ipt);
                })
            },
            methods: {
                zan(item) {
                    item.count++
                },
                top(item) {
                    this.list.splice(this.list.indexOf(item), 1)
                    this.list.unshift(item)
                },
                del(item) {
                    this.list.splice(this.list.indexOf(item), 1)
                }
            }

        }


        let vm = new Vue({
            el: "#app",

            components: {
                btns,
                contents
            },
            data: {

            }

        })
    </script>
</body>

</html>